
  <template>
  <el-main class="main">
    <div class="main-header">
      <div class="header-search">
        <span style="margin-right: 10px">用户名称:</span>
        <el-input
          v-model="input"
          class="w-50 m-2"
          style="width: 200px"
          placeholder="请输入用户名称"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <span>
          <el-button type="primary" style="margin-left: 15px" @click="searchDoc">搜索</el-button>
          <el-button type="primary" style="margin-left: 15px" @click="resetSearch">重置</el-button>
        </span>
      </div>
    </div>
    <div class="main-body">
      <div>
        <el-button type="primary" style="margin-left: 15px; margin-top: 5px"
        @click="addDoc"
          >
          <el-icon><Plus /></el-icon>新增</el-button
        >
      </div>
    
      <el-row>
        <el-col :span="24">
          <el-table :data="doctors" v-loading="loading" style="width: 100%">
            <el-table-column
              type="selection"
              width="50"
              style="text-align: center"
            />
            <el-table-column
              label="医生工号"
              style="text-align: center"
              prop="docid"
            />
            <el-table-column
              label="姓名"
              style="text-align: center"
              prop="name"
            />
            <el-table-column
              label="性别"
              style="text-align: center"
              prop="sex"
            />
            <el-table-column
              label="所属科室"
              style="text-align: center"
              prop="department"
            />
            <el-table-column
              label="联系方式"
              style="text-align: center"
              prop="tel"
            />

            <el-table-column
              label="操作"
              style="text-align: center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template #default="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  @click="updatedoc(row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="deletedoc(row.docid)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination></el-pagination> -->
        </el-col>
      </el-row>
      <el-pagination
                    v-model="currentPage"
                    :total="total"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                    />
    </div>

    <el-dialog v-model="updateDocdialogVisible" title="修改医生信息">
            <el-form v-model="form" @submit.prevent="savedoc" label-width="100">
                <!-- 表单内容 -->
                <el-form-item label="医生工号" prop="docid">
                    <el-input v-model="form.docid" readonly></el-input>
                </el-form-item>
                <el-form-item label="医生姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="医生性别" prop="sex">
                    <el-input v-model="form.sex"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" prop="department">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="tel">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form>
        </el-dialog>
        <el-dialog v-model="NewdialogVisible" title="新增医生信息"  label-width="100">
            <el-form v-model="form" @submit.prevent="adddoc">
                <!-- 表单内容 -->
                <el-form-item label="医生工号" prop="docid">
                    <el-input v-model="form.docid"></el-input>
                </el-form-item>
                <el-form-item label="医生姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="医生性别" prop="sex">
                    <el-input v-model="form.sex"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" prop="department">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="tel">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form>
        </el-dialog>
  </el-main>
</template>
<script setup>
import { ref, onMounted, watch, reactive } from "vue";


import axios from "axios";
import router from "@/router";

const doctors = ref([]);
const loading = ref(false);
const input=ref('');


// 获取输入框中的医生姓名
const searchDoc = () => {
    const name = input.value; 

  axios.get(`/api/doc/queryName?name=${name}`,{
    headers:{
      token: localStorage.getItem("token"),
    }
  })
    .then(res => {
      doctors.value = res.data.data;
    })
    .catch(error => {
      console.error(error);
    });
};
// 重置输入框
const resetSearch = () => {
  input.value = ''; 
  selectdoc();
};
//分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
loading.value = true;
//更换页面
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

watch(currentPage, () => {
  fetchData();
});
//分页
const fetchData = () => {
  axios.get(`/api/doc/page1?page=${currentPage.value}&pageSize=${pageSize.value}`,{
    header:{
      token: localStorage.getItem("token")
    }
    })
    .then(res => {
      total.value = res.data.data.total;
      // 处理返回数据
      selectdoc();
       
    });
};
fetchData();
onMounted(() => {
  console.log(localStorage.getItem("token"));
  axios.get("/api/userPost?userName="+localStorage.getItem("username")).then((request)=>{
    console.log(request.data.data);
    if(request.data.data=='管理员'){
    }else{
      router.push("/Fail");
    }
  })
  selectdoc();
})
const form = reactive({
    docid: '',
    name: '',
    sex: '',
    department: '',
    tel: ''
});
//获得医生信息
const selectdoc = () => {
    axios.get("/api/doc/page1")
      .then((res) => {
       doctors.value = res.data.data.rows;
      console.log(doctors.value);
   })
  .finally(() => {
    loading.value = false;
  });
}

//删除医生
const deletedoc = (docid) => {
  axios.post(`/api/doc/delete?docid=${docid}`).then((res) => {
    console.log("成功删除医生", docid);

    axios.get("/api/doc/page1")
    .then((res) => {
      doctors.value = res.data.data.rows;
      console.log(doctors.value);
    })
    .catch((error) => {
      console.error("删除医生失败", error);
    });
  });
  doctors.value = doctors.value.filter(doctor => doctor.id !== docid);

};
 // 对话框的可见性
const updateDocdialogVisible = ref(false);
const NewdialogVisible = ref(false);

//更新医生信息显示框
const updatedoc = (row) => {
  updateDocdialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log('修改医生信息', row);
    console.log(row.docid)
    form.docid = row.docid;
    form.name = row.name;
    form.tel = row.tel;
    form.sex = row.sex;
    form.department = row.department;
    console.log(updateDocdialogVisible.value);
};
//添加医生信息显示框
const addDoc = () => {
  NewdialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log(NewdialogVisible.value);
};
//保存
const savedoc = (row) => {
    // const docid=row.docid;
      // 处理表单的提交逻辑，将 form 对象中的属性值发送给服务端保存患者信息
      console.log('提交表单', form);
      axios.post(`/api/doc/update`,form)
    .then(response => {
      // 保存成功的处理逻辑
      console.log('保存成功', response.data);
      // 关闭弹窗
      updateDocdialogVisible.value = false;
      form.docid = '';
      form.name = '';
      form.tel = '';
      form.sex = '';
      form.department = '';
      selectdoc();
    });
}
const adddoc = (row) => {
   
   // 处理表单的提交逻辑，将 form 对象中的属性值发送给服务端保存患者信息
   console.log('提交表单', row);
   axios.post(`/api/doc/add`, form)
 .then(response => {
   // 保存成功的处理逻辑
   console.log('保存成功', response.data);
   // 关闭弹窗
   NewdialogVisible.value = false;
    form.docid = '';
      form.name = '';
      form.tel = '';
      form.sex = '';
      form.department = '';
      selectdoc();
 });
}
</script>



<style lang="scss" scoped>
.main {
  height: calc(100vh - 80px);
  background-color: rgb(250, 252, 253);
  .main-body {
    margin-top: 14px;
    border-radius: 10px;
    height: calc(86vh - 100px);
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .main-header {
    height: 80px;
    // border: 1px solid black;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    .header-search {
      padding: 10px 0 0 10px;
    }
  }
}
</style>